![bubbleで作るWebアプリにAuth0を使ってログインできるのか](https://devio2023-media.developers.io/wp-content/uploads/2021/10/2d7244f3575c5b2cbec8e9e7cdd9d69b.png)
bubbleで作るWebアプリにAuth0を使ってログインできるのか
Bubbleというノーコードツールを使って社内用途に使うWebアプリを作れないか検証しているのですが、 認証に関してパスワード認証だけでなく、ソーシャルログインやADを繋いでログインするなども考慮に入れています。
本記事ではAuth0を使ってbubbleにログインする方法を調べたのでやり方を記載しようと思います。
Auth0のアプリケーションを準備
Auth0のダッシュボードにログインし、Regular Web Applicationでアプリを作成します。
Client ID、Client Secret はのちに必要なので控えておきます。
コネクション(ログイン方法)を作成後、アプリケーションの設定画面で有効にします。
今回は Auth0のDatabase接続, Facebook, google-oauth2のソーシャル接続を有効にしました。
Bubbleでapp準備
Bubbleにサインアップした後、appを作成します。
作成が完了するとアプリの編集画面に遷移します。
デフォルトでアプリのテンプレートが当たっていますが、今回はStart with a blank page
をクリックしてまっさらな状態で試します。
アプリのコンポーネントはドラッグアンドドロップで配置できます。
テキストとボタンを配置してみました。
※ ページの右上にあるPreview
ボタンを押すと現在編集しているアプリをプレビューできます
Auth0に接続できるようにする
先ほど配置したボタンを押したらAuth0のログイン画面に遷移し、ログインを行う というシナリオでやっていきます。
これを行うには、Auth0のAPIにBubbleから接続できるようにしないといけませんでした。
そこで必要なのはBubbleが提供しているAPI Connector
というプラグインになります。
左メニューのPligins
をクリックし、Add Plugins
ボタンを押します。
APIと検索し、API Connector
をインスコします。
Auth0 API接続設定
API Connector
がインストールできたら、Auth0に接続するための設定を行なっていきます。
Add Another API
をクリックし、設定画面を出します。
設定内容ですが、
- API Name
- API名を記入
- Authentication
OAuth2 User-Agent Flow
を選択
- App ID
- Auth0アプリケーションのClient ID を記入
- App Secret
- Auth0アプリケーションのClient Secret を記入
- Dev. App ID
- Auth0アプリケーションのClient ID を記入 (開発環境用です)
- Dev. secret
- Auth0アプリケーションのClient Secret を記入 (開発環境用です)
- Scope
openid email profile
を記入。必要に応じて追加しましょう。
- Authentication goes in the header
- チェックを入れる
- Use a generic redirect URL
- チェックを入れる
- Header key
Authorization: Bearer
- Login dialog redirect
https://<<Auth0テナントのドメイン名>>.auth0.com/authorize
- Access token endpoint
https://<<Auth0テナントのドメイン名>>.auth0.com/oauth/token
- User profile endpoint
https://<<Auth0テナントのドメイン名>>.auth0.com/userinfo
- User ID key path
sub
- User email key path
email
とします。
Auth0を使ってログインした後、ログインユーザーの名前などをアプリで取得して表示したい場合は、Call部分のexpand
を押して設定していきます。
GETで、https://<<Auth0テナントのドメイン名>>.auth0.com/userinfo
を入力します。
Initialize call
を押して設定を保存する必要がありますが、以下のように失敗します。
これを行うにはまずAPIをランモードでテストする必要があるとのことでした。
のちにBubbleアプリのワークフロー設定を行うので、それが終わった後テストすることにします。
You haven't tested this API in run mode and authenticated with Auth0 API yet. You need to do this first to setup calls and to test the URLs and keys.To do this, setup a login workflow, run your app in run mode (with debug_mode=true in the URL) and authenticate with the service. Once done, your access token will be used to initate the API calls and the API will be marked as valid.IMPORTANT: make sure not to have a change page action in the workflow you use to authenticate while testing
Auth0アプリケーションの設定追加
Auth0で作ったアプリケーションの Allowed Callback URLs、Allowed Web Originsの設定をします。
リダイレクトのURLは、BubbleのAPI Connectorで設定したUse a generic redirect URL
に記載されているURLをコピーして設定します。
Web OriginsのURLは, https://<<Bubbleのアプリ名>>.bubbleapps.io
です。
Bubbleの画面設定
テキストとボタンを配置していましたが、Bubbleでボタンを押した時などに実行する処理をworkflowという機能を使って設定できます。
今回はボタンを押した時にAuth0のユニバサルログイン画面に遷移するようにしてみましょう。
ボタンのコンポーネントをダブルクリックすると設定メニューダイアログが表示されるので、そこにあるStart/Edit workflow
をクリックします。
ボタンをクリックした時に、Account
にあるSignup/login with a social network
を行うようにします。
OAuth Provider
には、先ほどAPI Connectorで作成したAPI接続があるので選択します
Preview
ボタンを押して動作を確認していきます
※ ランモードで起動します。?debug_mode=true というパラメーターがつく
設定が正しければ、画面上のボタンを押すとAuth0のログイン画面が表示されるはずなので、ログインしてみましょう。
ログインが成功すると、Bubbleアプリに戻ってきます。
ここで初期化が成功しました というメッセージが表示されました。
You have successfully initialized the OAuth2 connection for API - Auth0 API. You can go back to the Editor and keep building!
これで前工程で失敗していたinitialize call
が行えます。
API Connectorのinitialize call
API Connectorプラグインの設定画面に行き、initialize call
を押してみます
先ほどログインしたユーザーの情報をAuth0のAPIから受け取れるので、SAVEボタンで保存します。
これを行うことによりログイン後のユーザー情報をBubbleのアプリ内で表示することができます。
ログイン後の画面にユーザー名を表示させる
せっかくなので、ログイン後のユーザー情報を表示させてみます。
APIから受け取った情報を使用することができますので、早速設定してみましょう。
配置しておいたテキストをダブルクリックし、立ち上がった編集ダイアログのinsert dynamic data
をクリックします。
Get data from an external API
というのを選択することで、APIから受け取れたデータを使用できます。
作成したAPIを選択しましょう。
more
というところをクリックすると、どのデータを使うか選択することができます。
表示させたい情報をクリックしましょう。
nicknameを選択すると、アプリの編集画面は上記画像のようになります
設定後、Preview
ボタンを押して画面を表示すると、テスト と表示されていた部分が Auth0に設定されているユーザーのnickname に変わって表示されるようになりました。
まとめ
BubbleとAuth0を連携してログインするところまで行ってみました。
Bubbleを使うとコードを書かなくてもある程度のアプリを作れるので非常に便利だなと思います。
今回はログインだけでしたが、ユーザーがログインしているかどうかの判定やページリダイレクト、Auth0からのログアウトなどもコードを書かずに実装できるので別の機会に紹介したいと思います。